<template>
    <div class="mixed">
        <div class="upload_img">
            <el-form ref="uploadForm" :model="uploadForm" :rules="rules" label-width="55px" style="margin-top: 10px">
                <el-form-item label="内容" label-width="55px" :rules="rules1">
                    <el-input type="textarea" v-model="uploadForm.componentDetail"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="imageId" :rules="rules1">
                    <upload-file
                    @remove="removePic"
                    @success="uploadSuccess"
                    :limit="piclimit">
                    </upload-file>
                </el-form-item>
                <p class="upload_text">仅可上传一个文件（视频/音频），视频仅支持MP4，音频仅支持MP3，音/视频大小不得超过2G.</p>
            </el-form>
        </div>
    </div>
</template>

<script>
/**
* description: 图文模块
*/
import uploadFile from '../upload/upload.vue'
export default {
    components: {
        uploadFile,
    },
    data() {
        return {
            piclimit: 5,
            uploadForm: {
                piccontent: [],
                componentDetail:''
            },
            rules: {},
            rules1: [
                { required: true, message: '年龄不能为空' },
                { type: 'number', message: '年龄必须为数字值' }
            ],
        }
    },
    methods: {
        removePic(picnum,file,fileList) {
            this.uploadForm.piccontent = fileList[0]
        },
        
        uploadSuccess(picnum,file,fileList) {
            this.uploadForm.piccontent = fileList[0]
        },
        submit() {
            return { formData: this.uploadForm}
        },
    }
}
</script>

<style lang="scss" scoped>
.mixed {
    margin-left: 44px;
    padding-bottom: 10px;
}

.avatar-uploader {
    display: inline-block;
    vertical-align: top;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    background: #FFFFFF;
    border: 1px dashed #CBCED4;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.upload_text {
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 16px;
    margin: -8px 0 28px 54px;

}

// ::v-deep .el-textarea {
//     width: 555px;
// }

.add {
    width: 60px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #00B3A8;
    margin-left: 20px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #00B3A8;
    position: absolute;
    bottom: 0;
}
</style>